<template>
  <div id="piesimple">
  </div>

</template>

<script>

import * as echarts from 'echarts';

let chartDom;
let myChart;


export default{
  props:{
    chilData:Object,
  },
  mounted(){
    chartDom = document.getElementById('piesimple');
    myChart = echarts.init(chartDom, null, {
      renderer: 'svg'
    });
    let option;
    option = {
      title: {
        text: '性别分布图/管理员',
        subtext: 'Gender distribution chart/admin',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      // 是否显示标签
      // legend: {
      //   orient: 'vertical',
      //   left: 'left'
      // },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '男性' },
            { value: 735, name: '女性' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
    console.log("父组件传过来的值",this.chilData)
    this.updata();
  },
  methods:{
    updata(){
      var optionData = myChart.getOption();
      optionData.series[0].data[0].value = this.chilData.male;
      optionData.series[0].data[1].value = this.chilData.famale;
      myChart.setOption(optionData);
    }
  }
}
</script>


<style scoped>
  #piesimple{
    width: 350px;
    height: 350px;
  }
</style>